<template>
  <div class="time-line-box">
    <el-timeline>
      <el-timeline-item
        v-for="item in timeLineArr"
        :key="item.id"
        :timestamp="item.traceTime"
        placement="top"
      >
        <h4 style="color: #fff">{{ item.zoneName }}</h4>
        <p>
          <el-image
            style="width:300px;height:230px"
            :src="item.path"
            fit="scale-down"
            :lazy="true"
            :preview-src-list="[item.path]"
          ></el-image>
        </p>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
// import { getUserTimeline } from "@/api/home";
// import moment from "moment";
export default {
  props: {
    trace_id: {
      type: Number,
      default: 1,
    },
    day: {
      type: String,
      default: '',
    },
    timeLineArr: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      // timeLineArr: [],
    };
  },

  mounted() {
    // this.getUserTimelineArr();
  },
  methods: {
  //   async getUserTimelineArr() {
  //     let res = await getUserTimeline({
  //       userId: this.trace_id,
  //       day: this.day
  //     });
  //     if (res.code == 200) {
  //       res.data.forEach((item) => {
  //         item.trace_time = moment(item.traceTime * 1000).format(
  //           "YYYY-MM-DD HH:mm:ss"
  //         );
  //       });
  //       this.timeLineArr = res.data;
  //     }
  //   },
  // },
  }
};
</script>

<style lang="scss" scoped>
.time-line-box {
  width: 100%;
  height: 100%;
}
</style>